<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单布局</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--
  表单布局
     水平表单
        设置样式: form-horizontal
     内联表单
        设置样式  form-inline
-->
<form action="#" class="form-horizontal" role="form" style="background-color: #337ab7">
  <h2 align="center">用户信息表</h2>
  <!--表单中的表单元素组-->
  <div class="form-group">
    <label for="uname" class="control-label col-lg-2">姓名</label>
    <div class="col-lg-8">
      <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
    </div>
  </div>
  <div class="form-group">
    <label for="upwd" class="control-label col-lg-2">密码</label>
    <div class="col-lg-8">
      <input type="text" id="upwd" class="form-control" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <lable class="control-label col-lg-2">爱好</lable>
    <div class="col-lg-8 col-md-offset-1">
      <label class="checkbox-inline">
        <input type="checkbox" name="hobby">唱歌
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="hobby">跳舞
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-lg-2">城市</label>
    <div class="col-lg-8">
      <select class="form-control">
        <option>请选择城市</option>
        <option>上海</option>
        <option>北京</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="remark" class="control-label col-lg-2">简介</label>
    <div class="col-lg-8">
      <textarea id="remark" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-gruop">
    <div class="col-lg-2 col-lg-offset-5">
      <button class="btn btn-primary">
        提交
      </button>
    </div>
  </div>
</form>

<hr>

<form class="form-inline" style="background-color: #999999">
  <div class="form-group">
    <label for="username">姓名</label>
    <input type="text" id="username" class="form-control" placeholder="请输入姓名">
  </div>
  <div class="form-group">
    <label for="userPwd">密码</label>
    <input type="text" id="userPwd" class="form-control" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <button class="btn btn-default">提交</button>
  </div>
</form>
</body>
</html>